<template>
    <div>
      <el-page-header @back="back()" content="会员管理页面" style="margin-bottom: 10px;"/>
      <el-button @click="VIPDrawer" type="primary">查看会员体系</el-button>
      <el-drawer
        title="会员成长体系"
        :visible.sync="drawer">
        <div v-for="(item,index) in VIP"
          :key="item.lv">
          <div class="row">
            <span>{{item.name}}:</span>
            <div v-if="edit">
              <el-input v-model="item.growthvalue"></el-input>
            </div>
            <div  v-else>
              {{item.growthvalue}}
            </div>
          </div>
        </div>
        <el-button type="primary" @click="setVIP">修改</el-button>
      </el-drawer>
    </div>
</template>

<script>
    export default {
        name: "VIPManage",
      data(){
          return {
            drawer:false,
            //修改缓存
            buffer:[],
            //编辑状态
            edit:false,
            //VIP成长体系
            VIP:[]
          }
      },
      methods:{
        back(){
          this.$router.back();
        },
          VIPDrawer(){
            this.drawer=true;
            this.loadVIP();
          },
        setVIP(){
          this.buffer=this.VIP;
          this.edit=true;
        },
          loadVIP(){
            this.$axios.get('VIP/info').then(resp=>{
              if(resp && resp.status==200){

                this.VIP=resp.data;
                console.log(JSON.stringify(this.VIP));
              }
            })
          }
      }
    }
</script>

<style scoped>
.row{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
